<template>
  <view class="trade-tabs-container" :class="{ darkStyle: theme == 'dark' }">
    <view
      class="trade-tabs-item"
      v-for="(tab, index) in tabs"
      :key="index"
      :data-index="index"
      @click="onTabChange"
      :class="{ active: index == current }"
    >
      {{ tab.name }}
    </view>
  </view>
</template>

<script>
export default {
  name: "TradeTabs",
  data() {
    return {
      current: 0,
      tabs: [
        {
          name: "15min",
          id: 0,
        },
        {
          name: "30min",
          id: 1,
        },
      ],
    };
  },
  methods: {
    onTabChange(e) {
      const current = e.currentTarget.dataset.index;
      this.current = current;
    },
  },
};
</script>

<style lang="less" scoped>
.trade-tabs-container {
  font-size: 26rpx;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 0 30rpx;
  background: @white;
  color: #696b6e;
  &.darkStyle {
    background-color: @bg-color-dark;
  }
  .trade-tabs-item {
    /*padding: 0 10rpx;*/
    height: 66rpx;
    line-height: 66rpx;
    text-align: center;
    margin-right: 40rpx;
    /*&:first-child {*/
    /*  padding-left: 0;*/
    /*}*/
    &.active {
      color: @brand-color;
    }
  }
}
</style>
